﻿@model IEnumerable<Vidly.Models.Customer>
@*
    Note: I've set the model for this view to IEnumerable<Customer>.
    This is a simple interface implemented by the list class. Since
    in this view we only want to iterate over this list, and we don't
    need any of the operations in the List class (eg Add, Remove, etc),
    it's better to use the IEnumerable interface, which allows use to
    iterate over the list. If in the future, we replace the List with a
    different data structure, as long as it is enumerable, our view code
    will remain unchanged.
*@

@{
    ViewBag.Title = "Customers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Customers</h2>
<p>
    @Html.ActionLink("New Customer", "New", "Customers", null, new { @class = "btn btn-primary" })
</p>

<table id="customers" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Customer</th>
            <th>Membership Type</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function () {
            var table = $("#customers").DataTable({
                ajax: {
                    url: "/api/customers",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "name",
                        render: function(data, type, customer) {
                            return "<a href='/customers/edit/" + customer.id + "'>" + customer.name + "</a>";
                        }
                    },
                    {
                        data: "membershipType.name"
                    },
                    {
                        data: "id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-customer-id=" + data + ">Delete</button>";
                        }
                    }
                ]
            });


            $("#customers").on("click", ".js-delete", function () {
                var button = $(this);

                bootbox.confirm("Are you sure you want to delete this customer?", function (result) {
                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + button.attr("data-customer-id"),
                            method: "DELETE",
                            success: function () {
                                table.row(button.parents("tr")).remove().draw();
                            }
                        });
                    }
                });
            });
        });
    </script>
}
